@charset "utf-8";
@import './_remCalc.scss';
@import "./_colors.scss";

.f16 {
    @include remCalc(font-size, 16);
}

.f18 {
    @include remCalc(font-size, 18);
}

.f20 {
    @include remCalc(font-size, 20);
}

.f22 {
    @include remCalc(font-size, 22);
}

.f24 {
    @include remCalc(font-size, 24);
}

.f28 {
    @include remCalc(font-size, 28);
}

.f30 {
    @include remCalc(font-size, 30);
}

.f32 {
    @include remCalc(font-size, 32);
}

.f36 {
    @include remCalc(font-size, 36);
}

.ml10 {
    @include remCalc(margin-left, 10);
}

.ml15 {
    @include remCalc(margin-left, 15);
}

.ml20 {
    @include remCalc(margin-left, 20);
}

.ml25 {
    @include remCalc(margin-left, 25);
}

.ml30 {
    @include remCalc(margin-left, 30);
}

.ml35 {
    @include remCalc(margin-left, 35);
}

.ml50 {
    @include remCalc(margin-left, 50);
}

.mt10 {
    @include remCalc(margin-top, 10);
}

.mt15 {
    @include remCalc(margin-top, 15);
}

.mt20 {
    @include remCalc(margin-top, 20);
}

.mt25 {
    @include remCalc(margin-top, 25);
}

.mt30 {
    @include remCalc(margin-top, 30);
}

.mt35 {
    @include remCalc(margin-top, 35);
}

.mt50 {
    @include remCalc(margin-top, 50);
}

.mt-5 {
    @include remCalc(margin-top, -5);
}

.mt-10 {
    @include remCalc(margin-top, -10);
}

.mt-15 {
    @include remCalc(margin-top, -15);
}

.mr10 {
    @include remCalc(margin-right, 10);
}

.mr15 {
    @include remCalc(margin-right, 15);
}

.mr20 {
    @include remCalc(margin-right, 20);
}

.mr25 {
    @include remCalc(margin-right, 25);
}

.mr30 {
    @include remCalc(margin-right, 30);
}

.mr35 {
    @include remCalc(margin-right, 35);
}

.mr50 {
    @include remCalc(margin-right, 50);
}

.mb10 {
    @include remCalc(margin-bottom, 10);
}

.mb15 {
    @include remCalc(margin-bottom, 15);
}

.mb20 {
    @include remCalc(margin-bottom, 20);
}

.mb25 {
    @include remCalc(margin-bottom, 25);
}

.mb30 {
    @include remCalc(margin-bottom, 30);
}

.mb35 {
    @include remCalc(margin-bottom, 35);
}

.mb50 {
    @include remCalc(margin-bottom, 50);
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.txt-justify {
    width: 4em;
    display: inline-block;
    text-align: justify;
    vertical-align: top;

    &:after {
        content: '';
        width: 100%;
        display: inline-block;
    }
}

/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh {
    background-color: #fff;
}

.bgfb {
    background-color: #fbfbfb;
}

.bgf5 {
    background-color: #f5f5f5;
}

.bgf0 {
    background-color: #f0f0f0;
}

.bgeb {
    background-color: #ebebeb;
}

.bge0 {
    background-color: #e0e0e0;
}

/* safe color */
.g0 {
    color: #000;
}

.g3 {
    color: #333;
}

.g6 {
    color: #666;
}

.g9 {
    color: #999;
}

.gc {
    color: #ccc;
}

.wh {
    color: white;
}

.statusBox {
    display: flex;

    .icon {
        @include remCalc(font-size, 24);
        @include remCalc(padding, 4, 10);
        @include remCalc(letter-spacing, 1.5);
        @include remCalc(border-radius, 4);
        @include remCalc(margin-right, 10);
        color: #1EC36B;
        background: #EFFFF1;
    }

    .orange {
        background: #FFF7EA;
        color: #EEA424;
    }

    .red {
        color: #EE3A31;
        background: #FFEFED;
    }

    .blue {
        color: #FF211A;
        background: #EBF5FF;
    }

    .green {
        color: #1EC36B;
        background: #EFFFF1;
    }

    .gray {
        color: #999999;
        background: #F6F6F6;
    }
}

.padding-safe-area-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    /* iOS 11.0-iOS 11.1 */
    padding-bottom: env(safe-area-inset-bottom);
    /*iOS 11.2及以上 */
    box-sizing: border-box;
}

.margin-safe-area-bottom {
    margin-bottom: constant(safe-area-inset-bottom);
    /* iOS 11.0-iOS 11.1 */
    margin-bottom: env(safe-area-inset-bottom);
    /*iOS 11.2及以上 */
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

%layer {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background: #000;

    filter: alpha(opacity=40);
}

// .page-body {
//   margin-top: -1px;
// }
%box-sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

//end nav-left
%scroll-view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    height: 100%;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
}

%scroll-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    @extend %box-sizing;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

//弹性左右
%flex-left-right-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
}

%flex-left-right-item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

//一行文字超出隐藏
%text-overflow {
    overflow: hidden;
    /*文字隐藏后添加省略号*/
    white-space: nowrap;
    /*自动隐藏文字*/
    text-overflow: ellipsis;
    /*强制不换行*/
}

//两行文字超出隐藏
%text-overflow-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html.remove-status-bar .header {
    padding-top: 0 !important;
}

.page {
    background: $background;
    height: 100%;
}

%text-vertical-align-middle {
    display: -webkit-box;

    -webkit-box-align: center;
    -webkit-box-pack: center;
}

%flex {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

%flex-item {
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// 透明度100%
@mixin thin-border($double: false,
    $isPostion: false,
    $topOrBottom: top,
    $color: $color-border) {
    @if $isPostion==false {
        position: relative;
    }

    @if $double==false {
        &:after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;

            #{$topOrBottom}: -1px;
        }
    }

    @else {
        &:before {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;
        }

        &:after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;
        }
    }
}

// 透明度50%
@mixin thinlucid-border($double: false,
    $isPostion: false,
    $topOrBottom: top,
    $color: $colorlucid-border) {
    @if $isPostion==false {
        position: relative;
    }

    @if $double==false {
        &:after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;

            #{$topOrBottom}: -1px;
        }
    }

    @else {
        &:before {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;
        }

        &:after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
            transform-origin: 0 0;
        }
    }
}

input+.cdicon-ico_delete {
    position: relative;
    display: none;
    color: #ccc;

    @include remCalc(top, 4);
    @include remCalc(margin-left, -40);
    @include remCalc(right, -30);
}

input:valid:focus+.cdicon-ico_delete {
    display: inline;
}

.btn-wrap {
    @include remCalc(margin, 60, 0);
    @include remCalc(padding, 0, 30);

    .btn {
        @include remCalc(height, 88);
        @include remCalc(line-height, 88);
        text-align: center;
        // background: $color-blue;
        background-image: linear-gradient(-45deg, #FF211A, #FF211A);
        color: #fff;
        @include remCalc(font-size, 36);
        @include remCalc(border-radius, 6);

        &.disabled {
            color: #fff !important;
            background: #ccc !important;
        }

        &.cancel {
            border: 1px solid #eaeaed;
            color: #7f7f7f !important;
            background: #fff !important;
        }
    }

    &.fixed {
        padding: 0;
        margin: 0;

        .btn {
            border-radius: 0;
        }
    }
}

.sumbmit {
    width: 100%;
    height: pw(50);
    padding-bottom: pw(50);
    .btn {
        height: 100%;
        width: pw(355);
        margin: 0 auto;
        border-radius: pw(10);
        background: #FF211A;
        display: block !important;
        padding: 0 !important;
    }
}

.nav-bar {
    display: flex;
    background: #fff;
    @include thin-border(false, false, bottom);

    // @include remCalc(margin-top, 20);
    li {
        flex: 1;
        text-align: center;
        @include remCalc(font-size, 32);
        @include remCalc(line-height, 88);

        span {
            display: inline-block;
            position: relative;

            &::before {
                content: "";
                @include remCalc(height, 4);
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                background: $color-blue;
                visibility: hidden;
            }
        }

        color: #333;

        &.selected {
            color: $color-blue;

            span {
                &::before {
                    visibility: visible;
                }
            }
        }
    }
}

.mint-actionsheet-list {
    max-height: 251px !important;
    overflow-y: auto !important;
}

.mint-datetime-picker {
    width: 100%;
}

.hide {
    display: none;
}

.mint-msgbox-btn {
    @include remCalc(font-size, 36);
}

.mint-swipe-indicator {
    &.is-active {
        background: #5f8ce7 !important;
        opacity: 1;
    }
}

.mint-cell {
    @include remCalc(min-height, 90);

    .mint-cell-wrapper {
        @include remCalc(font-size, 28, !important);
        @include remCalc(padding, 0, 30);
        color: #333;

        .mint-cell-title {
            @include remCalc(font-size, 30);
        }

        .mint-field-core {
            text-align: right;
        }
    }
}

.mint-msgbox-wrapper {

    // display: flex;
    // justify-content: center;
    // align-items: center;
    // width: 100%;
    // height: 100%;
    .mint-msgbox {
        width: 86% !important;
        // -moz-transform: translate3d(-50%, -50%, 0);
        // -ms-transform: translate3d(-50%, -50%, 0);
        // -o-transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        // transform: none;
        // margin-left: -37.5%;
        @include remCalc(border-radius, 20, !important);

        .mint-msgbox-header {
            font-weight: 0 !important;
            @include remCalc(font-size, 36, !important);
            @include remCalc(padding-top, 42, !important);

            .mint-msgbox-title {
                font-weight: 0 !important;
                @include remCalc(font-size, 36, !important);
            }
        }

        .mint-msgbox-content {
            @include remCalc(padding, 16, 52, 36, 52);
            @include remCalc(min-height, 0, !important);

            .mint-msgbox-message {
                text-align: center;
                @include remCalc(font-size, 30, !important);
                @include remCalc(line-height, 40, !important);

                .figureImg {
                    text-align: center;

                    img {
                        @include remCalc(width, 480);
                        height: auto;
                        display: inline;
                        @include remCalc(margin-bottom, 30);
                    }
                }

                .figureText {
                    p {
                        text-align: left;
                    }
                }
            }
        }

        .mint-msgbox-btns {
            @include remCalc(line-height, 100, !important);
            @include remCalc(height, 100, !important);

            .mint-msgbox-btn {
                @include remCalc(font-size, 36, !important);

                &.mint-msgbox-confirm {
                    color: $color-blue !important;
                }
            }
        }

        .mint-searchbar-cancel {
            @include remCalc(font-size, 30, !important);
            @include remCalc(margin-left, 10, !important);
            @include remCalc(width, 64, !important);
        }
    }
}

.mint-searchbar-cancel {
    @include remCalc(font-size, 30, !important);
}

.mint-search {
    height: auto;
}

.mint-toast {
    z-index: 3000;
}

.mint-popup-4 {
    width: 100%;

    .mint-datetime-action {
        @include thin-border(false, false, bottom);
    }

    .picker-slot-wrapper,
    .picker-item {
        backface-visibility: hidden;
    }
}

.required {
    &:after {
        content: "*";
        color: #ee3a31;
        @include remCalc(padding-left, 8);
    }
}

// .btn-wrap {
//   @include remCalc(margin, 60, 0);
//   @include remCalc(padding, 0, 30);
//   .btn {
//     @include remCalc(height, 88);
//     @include remCalc(line-height, 88);
//     text-align: center;
//     // background: $color-blue;
//     background-image: linear-gradient(-45deg, #3a93ee, #39a9fd);
//     color: #fff;
//     @include remCalc(font-size, 36);
//     @include remCalc(border-radius, 6);
//   }
//   &.fixed {
//     padding: 0;
//     margin: 0;
//     .btn {
//       border-radius: 0;
//     }
//   }
// }
.form-title {
    @include remCalc(font-size, 28);
    @include remCalc(height, 70);
    @include remCalc(line-height, 70);
    @include remCalc(padding, 0, 30);
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section {
    overflow: scroll;
    position: relative;
}

.page-infinite-loading {
    text-align: center;

    >span {
        display: inline-block;
    }
}

input[disabled] {
    color: #bbb !important;
}

.is-nolabel {
    min-height: auto;
    width: 100%;

    .mint-cell-wrapper {
        padding: 0;
        background: #fff;
    }

    .mint-cell-left {
        display: none;
    }

    .mint-cell-title {
        display: none;
    }

    .mint-cell-value {
        @include remCalc(margin, -10, 0, -14, 0);

        input {
            @include remCalc(padding, 12, 0);
            line-height: normal;
            @include remCalc(font-size, 32);
            color: #333;
        }

        .mint-field-state {
            display: none;
        }
    }
}

.toast-icon {
    @include remCalc(font-size, 60);
}

// .line{
//   background: red;
//   @include remCalc(width, 1);
//   @include remCalc(height, 48);
// }

.no-more {
    text-align: center;
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding-top, 10);
    @include remCalc(padding-bottom, 20);
}

.pull-to-refresh {
    @include remCalc(line-height, 88);
    @include remCalc(font-size, 30);
    @include remCalc(height, 88);

    >img {
        @include remCalc(width, 40);
        @include remCalc(height, 40);
        @include remCalc(margin-right, 10);
        position: relative;
        @include remCalc(top, -6);
    }

    color: #999;

    &.drop {
        >img {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            /* IE 9 */
            -moz-transform: rotate(180deg);
            /* Firefox */
            -webkit-transform: rotate(180deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(180deg);
        }
    }
}

// 数据简报机具订购,快享付公共样式
.machine-order,
.transaction-data {
    .machine-order-title {
        display: flex;
        @include remCalc(font-size, 28);
        @include remCalc(padding, 0, 30);
        @include remCalc(line-height, 80);

        >p {
            color: #333;

            &+p {
                flex: 1;
                text-align: right;
                @include remCalc(font-size, 26);
                color: #999;
            }
        }
    }

    .machine-order-content {
        background: #fff;
        @include remCalc(padding, 0, 30);
        @include thinlucid-border(true, false);

        .content:first-child,
        .content:nth-child(2) {
            color: #666;
            @include remCalc(border-radius, 8);
            @include remCalc(font-size, 26);
            @include remCalc(padding, 30, 20, 23, 20);
            @include thin-border(false, false, bottom);
            display: flex;
            position: relative;

            .content-barL,
            .content-barR {
                @include remCalc(width, 306);
                flex: 1;

                >p:first-child {
                    @include remCalc(font-size, 50);
                    color: #333;

                    span {
                        @include remCalc(font-size, 28);
                        @include remCalc(margin-left, 6);
                        color: #666;
                    }
                }
            }

            .content-barL {
                border-right: 1px solid rgba(221, 221, 221, 0.5);
                @include remCalc(margin-right, 88);

                &:last-child {
                    border-right: 0;
                }
            }
        }

        .content:last-child {
            color: #666;
            @include remCalc(border-radius, 8);
            @include remCalc(font-size, 26);
            @include remCalc(padding, 30, 20, 23, 20);
            // @include thin-border(false, false, bottom);
            display: flex;
            position: relative;

            .content-barL,
            .content-barR {
                @include remCalc(width, 306);
                flex: 1;

                >p:first-child {
                    @include remCalc(font-size, 50);
                    color: #333;

                    span {
                        @include remCalc(font-size, 28);
                        @include remCalc(margin-left, 6);
                        color: #666;
                    }
                }
            }

            .content-barL {
                border-right: 1px solid rgba(221, 221, 221, 0.5);
                @include remCalc(margin-right, 88);

                &:last-child {
                    border-right: 0;
                }
            }
        }
    }
}

.enjoy-fast-pay {
    .machine-order-title {
        display: flex;
        @include remCalc(font-size, 28);
        @include remCalc(padding, 0, 30);
        @include remCalc(line-height, 80);

        >p {
            color: #333;

            &+p {
                flex: 1;
                text-align: right;
                @include remCalc(font-size, 26);
                color: #999;
            }
        }
    }

    .machine-order-content {
        background: #fff;
        @include remCalc(padding, 0, 30);
        @include thinlucid-border(true, false);

        .content {
            color: #666;
            @include remCalc(border-radius, 8);
            @include remCalc(font-size, 26);
            @include remCalc(padding, 30, 20, 23, 20);
            display: flex;
            position: relative;

            .content-barL,
            .content-barR {
                @include remCalc(width, 306);
                flex: 1;

                >p:first-child {
                    @include remCalc(font-size, 50);
                    color: #333;

                    span {
                        @include remCalc(font-size, 28);
                        @include remCalc(margin-left, 6);
                        color: #666;
                    }
                }
            }

            .content-barL {
                border-right: 1px solid rgba(221, 221, 221, 0.5);
                @include remCalc(margin-right, 88);

                &:last-child {
                    border-right: 0;
                }
            }
        }
    }
}

.linebar-list {
    background: #fff;
    @include thinlucid-border(true, false);

    li {
        display: flex;
        @include remCalc(height, 88);
        @include remCalc(line-height, 88);

        .context-left {
            text-align: right;
            @include remCalc(width, 70);

            i {
                @include remCalc(font-size, 32);
            }

            .bg-blue {
                color: #3483f9;
            }

            .bg-orange {
                color: #f48c16;
            }
        }

        .context-right {
            flex: 1;
            overflow: hidden;
            @include remCalc(padding-right, 30);
            @include remCalc(margin-left, 30);
            @include remCalc(font-size, 32);
            // @include thinlucid-border(false, false, top);
            @include thin-border(false, false, bottom);

            .text-left {
                float: left;
            }

            .text-right {
                float: right;
            }

            .main-text {
                color: #333;
            }

            .bg-red {
                color: #f91e1e;
            }

            .sl-new {
                @include remCalc(border-radius, 8);
                @include remCalc(font-size, 80);
                @include remCalc(margin, 5, 0, 0, 12);
                display: none;
            }

            .sl-arrowright {
                @include remCalc(line-height, 88);
                @include remCalc(font-size, 26);
                color: #ccc;
            }

            .version-num {
                @include remCalc(margin-right, 10);
                // @include remCalc(font-size, 26);
                color: #999;
            }
        }

        &:last-child {
            .context-right {
                &:after {
                    display: none;
                }
            }
        }
    }
}

.l-form-list {
    .form-blank-style {
        @include remCalc(padding-bottom, 80);
    }

    .tt {
        @include remCalc(font-size, 28);
        // @include remCalc(padding, 15, 0, 15, 0)
        position: relative;
        color: #666;
    }

    .tt:after {
        content: "";
        position: absolute !important;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    .tt:before {
        content: "";
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #ddd;
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    .tt-no-up-border:before {
        border-bottom: 0;
    }

    .prompt {
        background: #fff7ea;
        color: #eea424;
        border-radius: pw(10);
        margin: pw(10) 0;
        // @include remCalc(margin-top, 20);
        @include remCalc(padding, 20, 30, 20, 30);
        display: flex;
        align-items: flex-start;
        // @include thin-border(false, false, top);

        .sl-flbgz {
            color: #f8c63e;
            @include remCalc(font-size, 28);
            position: relative;
            @include remCalc(top, 5);
            @include remCalc(margin-right, 14);
        }

        .prompt-text {
            flex: 1;
            @include remCalc(font-size, 26);
            @include remCalc(line-height, 36);
        }
    }

    .ct {
        background: #fff;
        padding: pw(10) pw(10) 0 pw(10);
        border-radius: pw(10);
    }

    .ct-last:after {
        content: "";
        position: absolute !important;
        left: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    .upload-item,
    .upload-item-last {
        position: relative;
        @include remCalc(padding, 0, 0, 0, 30);

        .item {
            // @include remCalc(padding, 21, 20);
            // padding: pw(10);
            .item-tt {
                @include remCalc(font-size, 32);
                margin-bottom: pw(8);
                color: #333;
                &::after{
                    content: "*";
                    color: #ee3a31;
                    padding-left: 0.2rem;
                }
            }

            .item-ct {


                .item-lft {
                    @include remCalc(margin-right, 21);

                    .warn-text {
                        @include remCalc(font-size, 24);
                        @include remCalc(line-height, 32);
                        color: #969696;
                        font-weight: 400;
                        @include remCalc(margin-bottom, 10);
                    }

                    .img-button {
                        display: flex;

                        .look-img {
                            flex: 1;
                            @include remCalc(font-size, 24);
                            color: #3A69FD;
                            position: absolute;
                            right: 0;
                            top: pw(20);
                            font-size: pw(12);
                            font-weight: 400;
                        }

                    }
                }

                .item-rt {
                    .store-head-box {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        @include remCalc(width, 200);
                        @include remCalc(height, 200);
                        background: #f9f9f9;

                        img {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }

                        .imgOpcity {
                            opacity: 0.5;
                        }

                        .sl-cwts {
                            position: absolute;
                            @include remCalc(top, -25);
                            @include remCalc(right, -25);
                            @include remCalc(font-size, 32);
                            @include remCalc(padding, 15);
                            color: #ee3a31;
                        }
                    }
                }
            }
        }

        .item-style {
            @include remCalc(padding, 21, 0, 16, 0);

            .item-tt-style {
                @include remCalc(font-size, 32);
                color: #333;
            }

            .item-ct-style {
                @include remCalc(padding-right, 30);

                .item-rt-style {
                    text-align: right;

                    .store-head-box {
                        position: relative;
                        display: inline-block;
                        @include remCalc(width, 330);
                        @include remCalc(height, 206);
                        background: #f9f9f9;
                        @include remCalc(margin, 20, 0, 0, 0);

                        img {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }

                        .imgOpcity {
                            opacity: 0.5;
                        }

                        .sl-cwts {
                            position: absolute;
                            @include remCalc(top, -25);
                            @include remCalc(right, -25);
                            @include remCalc(font-size, 32);
                            @include remCalc(padding, 15);
                            color: #ee3a31;
                        }

                        &:nth-child(even) {
                            @include remCalc(margin-left, 28);
                        }
                    }
                }
            }
        }
    }

    .upload-item:after {
        content: "";
        position: absolute !important;
        @include remCalc(left, 0);
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    .input-item,
    .input-item-last {
        position: relative;
        @include remCalc(padding, 0, 30, 0, 30);

        .itemBox {
            @include remCalc(padding, 26, 0);

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .flexItem {
                    display: flex;
                    align-items: center;
                }

                .label {
                    @include remCalc(font-size, 32);
                    color: #333;
                    @include remCalc(line-height, 32);
                    @include remCalc(margin-right, 30);

                    .warn-text {
                        @include remCalc(font-size, 24);
                        // @include remCalc(line-height, 32);
                        @include remCalc(padding-top, 10);
                        color: #999;
                    }
                }

                .noRedit {
                    color: #999;
                    @include remCalc(font-size, 32);
                }

                .unit {
                    @include remCalc(font-size, 30);
                    color: #333;
                }

                .textarea {
                    width: 100%;
                    @include remCalc(margin-top, 10);
                    @include remCalc(font-size, 32);
                    @include remCalc(line-height, 44);
                }

                .input {
                    flex: 1;
                }

                .no-input {
                    flex: 1;
                    text-align: right;
                    @include remCalc(font-size, 32);
                }

                .select {
                    flex: 1;
                    text-align: right;
                    color: #333;
                    font-size:pw(14) !important;
                    font-weight: 400 !important;
                    @include remCalc(line-height, 44);

                    &.noRedit {
                        color: #999;
                    }
                }

                .no-select {
                    color: #999;
                    @include remCalc(font-size, 32);
                }

                .sl-right_arrow {
                    @include remCalc(font-size, 28);
                    color: #ccc;
                }

                .check-btn {
                    @include remCalc(padding, 0, 12, 0, 12);
                    @include remCalc(font-size, 28);
                    @include remCalc(line-height, 44);
                    @include remCalc(margin-left, 10);
                    @include remCalc(height, 44);
                    color: #999;
                    border: 1px solid #999;
                    border-radius: 2px;
                }
                .check-btn-selected{
                    color: #FF211A;
                    border: 1px solid #FF211A;
                }
            }

            .warn-text {
                @include remCalc(font-size, 24);
                @include remCalc(line-height, 32);
                @include remCalc(padding-top, 10);
                color: #999999;
            }
        }
    }

    .input-item:after {
        content: "";
        position: absolute !important;
        @include remCalc(bottom, 0);
        @include remCalc(left, 0);
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }

    .no-border:after {
        border: 0 !important;
    }

    .mult-row {
        position: relative;
        @include remCalc(padding, 0, 30, 0, 30);

        .itemBox {
            @include remCalc(padding, 22, 0);

            .item {
                
                .label {
                    @include remCalc(font-size, 32);
                    color: #333;
                    @include remCalc(line-height, 32);
                    @include remCalc(margin-right, 30);
                }

                .itemLayout {
                    display: flex;
                    @include remCalc(font-size, 32);
                    color: #333;

                    .layout {
                        display: flex;
                        @include remCalc(margin-top, 28);
                        position: relative;

                        .noRedit {
                            color: #999;
                            @include remCalc(font-size, 32);
                        }

                        .input-nme {
                            @include remCalc(font-size, 30);
                            color: #333;
                        }

                        .input-clear-wrap {
                            @include remCalc(width, 94, !important);
                            @include remCalc(margin, 0, 32, !important);

                            input {
                                box-sizing: border-box;
                                @include remCalc(margin, 0, !important);
                                @include remCalc(padding, 0, !important);
                                @include remCalc(height, 45, !important);
                                @include remCalc(line-height, 45, !important);
                            }
                        }

                        .unit {
                            @include remCalc(font-size, 30);
                            color: #333;
                            @include remCalc(margin-top, 2);
                        }

                        &:first-child:after() {
                            content: "";
                            position: absolute;
                            @include remCalc(top, 6);
                            @include remCalc(right, 0);
                            @include remCalc(width, 2);
                            @include remCalc(height, 30);
                            @include remCalc(background, #ddd);
                        }

                        &:nth-child(1) {
                            width: 53% !important;
                        }

                        &:nth-child(2) {
                            width: 47% !important;
                            text-align: right;
                            align-items: right;
                            @include remCalc(margin-left, 36);
                        }
                    }
                }

                .warn-text {
                    @include remCalc(font-size, 24);
                    @include remCalc(padding-top, 10);
                    color: #999;
                }
            }
        }
    }

    .mult-row:after {
        content: "";
        position: absolute !important;
        @include remCalc(bottom, 0);
        @include remCalc(left, 30);
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
        // @include thinlucid-border(false, false, bottom);
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }
}

.mesBox {
    color: #333 !important;
    @include remCalc(font-size, 28, !important);

    .mes-header {
        color: #333;
        font-weight: 700 !important;
        @include remCalc(font-size, 36, !important);
        @include remCalc(padding-top, 42, !important);
        text-align: center;
    }

    .mes-content {
        @include remCalc(padding, 16, 52, 36, 52);

        .text2 {
            color: $color-blue !important;
            @include remCalc(font-size, 28, !important);
            @include remCalc(margin-top, 12);
        }

        .item {
            @include remCalc(margin-top, 30);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .label {
                @include remCalc(font-size, 28);
                color: #333;
                @include remCalc(margin-right, 18);
            }

            .input-clear-wrap {
                flex: 1;
                width: none;
                @include remCalc(height, 72);
                border: 1px solid #ddd;
                @include remCalc(border-radius, 8);

                input {
                    text-align: left !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    @include remCalc(padding-left, 20);
                }
            }
        }
    }
}

.inputArea {
    display: flex;
    align-items: center;
    @include remCalc(height, 80);
    @include thinlucid-border(false, false, bottom);

    .input-clear-wrap {
        flex: 1;
        align-items: center;
        @include remCalc(font-size, 32);
        @include remCalc(margin-right, 20);
        width: 100%;

        input {
            width: 100%;
            text-align: left;
            font-size: inherit;
            @include remCalc(height, 40);
            @include remCalc(line-height, 40);
            @include remCalc(padding, 0, 0, 0, 30);
            border: none;
        }

        i {
            opacity: 0.2;
            font-size: inherit;
            position: relative;
            @include remCalc(margin-top, 6);

            &::after {
                content: "";
                position: absolute;
                $size: -20;
                @include remCalc(top, -10);
                @include remCalc(bottom, $size);
                @include remCalc(left, -10);
                @include remCalc(right, $size);
            }
        }
    }

    .verifyButton {
        color: $color-blue;
        @include remCalc(font-size, 28);
        // @include remCalc(height, 80);
        // @include remCalc(line-height, 80);
        @include remCalc(padding, 0, 56, 0, 46);
        @include remCalc(border-left, 1, #eee, solid);
    }
}

.open-pay-way {
    .select {
        flex: 1;
        text-align: right;
        color: #333;
        @include remCalc(font-size, 32);
        @include remCalc(line-height, 44);
    }

    .no-select {
        color: #999;
    }
}

.mint-toast {
    position: absolute !important;
}

.mint-indicator-mask {
    z-index: 1000;
}

.mint-navbar {
    @include remCalc(margin-bottom, 0);
    @include remCalc(font-size, 32, !important);

    .mint-tab-item {
        @include remCalc(padding, 24, 0, 24, 0);

        &.is-selected {
            @include remCalc(border-bottom, 0);
            color: $color-blue;
            @include remCalc(margin-bottom, 0);
            position: relative;

            &::after {
                width: 100%;
                @include remCalc(height, 4);
                content: "";
                background: $color-blue;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
    }

    .mint-tab-item-label {
        @include remCalc(font-size, 32, !important);
        @include remCalc(line-height, 38, !important);
        color: #333;
    }
}

.mint-switch-core:before {
    background-color: #eee !important;
}

.common-dialog-tip-icon {
    text-align: center;
    display: block;
    @include remCalc(font-size, 106);
    @include remCalc(margin-bottom, 40);

    &.blue {
        color: $color-blue;
    }

    &.yellow {
        color: #f5961f;
    }
}

// 审批进度
.approval-progress {
    .t-timeline {
        background: #fff;
        @include remCalc(padding, 30);
        @include thin-border(true, false);

        .t-timeline-item-bottom {

            // @include remCalc(margin-bottom, 10);
            .t-timeline-item {
                position: relative;
                display: flex;

                // @include remCalc(padding-right, 30);
                .t-timeline-header {
                    vertical-align: top;
                    @include remCalc(margin-top, 6);

                    .active {
                        img {
                            @include remCalc(width, 30);
                            @include remCalc(height, 30);
                            display: block;
                            position: relative;
                            z-index: 1;
                        }
                    }

                    .t-timeline-line {
                        position: absolute;
                        @include remCalc(left, 13);
                        @include remCalc(top, 38);
                        @include remCalc(width, 2);
                        // @include remCalc(height, 116);
                        @include remCalc(height, 65);
                        @include remCalc(padding, 0);
                        background-color: #e4e4e4;
                        z-index: 0;
                    }
                }

                .t-timeline-main {
                    flex: 1;
                    text-align: right;
                    color: #333;
                    @include remCalc(margin-bottom, 16);
                    @include remCalc(margin-left, 18);

                    li {
                        @include remCalc(height, 45);
                        @include remCalc(line-height, 45);
                        @include remCalc(font-size, 24);
                        color: #999;
                        display: flex;

                        &:first-child {
                            >div {
                                @include remCalc(font-size, 30);

                                &.grey {
                                    color: #999;
                                }

                                &.blue {
                                    color: $color-blue;
                                }

                                &.red {
                                    color: #ee3a31;
                                }

                                &+div {
                                    @include remCalc(font-size, 24);
                                }
                            }

                            // div:first-child {
                            //   color: $color-blue;
                            //   @include remCalc(font-size, 30);
                            // }
                        }

                        >div {
                            &+div {
                                flex: 1;
                                text-align: right;
                            }
                        }
                    }
                }
            }

            .t-timeline-item:last-child {
                position: relative;
                display: flex;

                .t-timeline-header {
                    vertical-align: top;

                    .active {
                        img {
                            @include remCalc(width, 30);
                            @include remCalc(height, 30);
                            display: block;
                            position: relative;
                            z-index: 1;
                        }
                    }

                    .t-timeline-line {
                        display: none;
                    }
                }
            }
        }
    }
}

.messageBox {
    text-align: center;
    padding: 20px 0;
}